/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import {
  Form, Input, Radio, Select, Icon,
  Upload, Tooltip, DatePicker, Button,
} from 'antd';
import {connect} from 'dva';
import ReactDataGrid from 'react-data-grid';
import moment from 'moment'
import find from 'lodash/find'
import request from '@/utils/request';
const FormItem = Form.Item;
const { TextArea } = Input;
const RadioGroup = Radio.Group;
const Option = Select.Option;
class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      users:[],
      fileList:[],
      meterArr: [{name:'采样编号',key:'cybhx',maxValue:'',initValue:''}],
      address:[{ name: "塔尔浪水源水",key:'key0'},
        { name: "塔尔浪出厂水",key:'key1'},
        { name: "老城区水厂出厂水",key:'key2'},
        { name: "示范区水厂出厂水",key:'key3'},
        { name: "绿园小区",key:'key4'},
        { name: "区住建局",key:'key5'},
        { name: "农科所",key:'key6' },
        { name: "示范区宜居园社区",key:'key7'},
        { name: "亚尔镇政府",key:'key8'},
        { name: "自来水公司" ,key:'key9'},
        { name: "限值",key:'key10'}]
    };
  }

  componentDidMount() {
    const that=this;
    let arr=[
      {name:'色度',key:'sd',maxValue:'≤15',initValue:'<5'},
      {name:'肉眼可见物',key:'rykjw',maxValue:'无',initValue:'无'},
      {name:'浑浊度NTU',key:'hzd',maxValue:'≤1',initValue:''},
      {name:'臭和味',key:'chw',maxValue:'无异臭、异味',initValue:'无'},
      {name:'PH值',key:'ph',maxValue:'6.5-8.5',initValue:''},
      {name:'细菌总数CFU/mL',key:'xjzs',maxValue:'≤100',initValue:''},
      {name:'大肠菌群MPN/100mL',key:'dcjq',maxValue:'不得检出',initValue:'未检出'},
      {name:'耐热大肠菌群MPN/100mL',key:'fdcjq',maxValue:'不得检出',initValue:'未检出'},
      {name:'二氧化氯mg/L',key:'eyhl',maxValue:'0.10-0.80|末梢水≥0.02',initValue:''},
      {name:'高锰酸盐指数(以O2计)mg/L',key:'hyl',maxValue:'≤3',initValue:''},
      {name:'氨(以N计)mg/L',key:'ad',maxValue:'≤0.5',initValue:''},
      {name:'游离氯mg/L',key:'yl',maxValue:'0.3-2.0',initValue:'-'},
    ]
    console.log('address',this.state.address)
    if(this.props.editRecord){
      console.log('items',this.props.editRecord.items)
      for(let i=0;i<this.state.address.length-1;i++){
        for(let j=0;j<this.props.editRecord.items.length-1;j++){
          if(this.state.address[i].key===this.props.editRecord.items[j].name_key&&
          this.state.address[i].name!==this.props.editRecord.items[j].name){
            this.state.address[i].name=this.props.editRecord.items[j].name
          }
        }
      }
      this.setState({
        address:this.state.address
      })
    }
    let meterArr=this.state.meterArr

    for(let i=0;i<arr.length;i++){
      meterArr.push({
        key:arr[i].key,
        name:arr[i].name,
        maxValue:arr[i].maxValue,
        initValue:arr[i].initValue,

      })
    }
    console.log('meterArr',meterArr)
    this.setState({meterArr})
  }

  renderColumn=(item)=>{
    let renderColumnItem=[]
    const {getFieldDecorator} = this.props.form;
    for(let i=0;i<this.state.address.length;i++){
      if(i===this.state.address.length-1){
        renderColumnItem.push(
          <FormItem
            style={{ flex: '1', marginRight: '0' }}

          >
            {getFieldDecorator(`${this.state.address[i].key}$${item.key}$${this.state.address[i].key}`, {
              initialValue: item.maxValue,
            })(
              <Input style={{ width: '100%', fontWeight: 'bold' }} disabled/>,
            )}
          </FormItem>
        )
      }else{
        if(this.props.editRecord){
          renderColumnItem.push(
            <FormItem
              style={{ flex: '1', marginRight: '0' }}

            >
              {getFieldDecorator(`${this.state.address[i].key}$${item.key}$${this.state.address[i].key}`, {
                initialValue: find(this.props.editRecord.items[i].items,(o)=>{
                  return o.key===item.key
                }).value,
              })(
                <Input style={{ width: '100%', fontWeight: 'bold' }}/>,
              )}
            </FormItem>
          )
        }else{
          renderColumnItem.push(
            <FormItem
              style={{ flex: '1', marginRight: '0' }}

            >
              {getFieldDecorator(`${this.state.address[i].key}$${item.key}$${this.state.address[i].key}`, {
                initialValue: item.initValue?item.initValue:0,
              })(
                <Input style={{ width: '100%', fontWeight: 'bold' }}/>,
              )}
            </FormItem>
          )
        }
      }

    }
    return renderColumnItem
  }
  render() {
    const formItemLayoutWithLabel = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 8},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 14},
      }
    };
    const props = {
      onRemove: (file) => {
        this.setState(({ fileList }) => {
          const index = fileList.indexOf(file);
          const newFileList = fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
          };
        });
      },
      beforeUpload: (file) => {
        this.setState(({ fileList }) => ({
          fileList: [file],
        }));
        return false;
      },
      fileList: this.state.fileList,
    };
    const {getFieldDecorator} = this.props.form;
    const meterForms = this.state.meterArr.map((item, index) => {
      return (
        <Form style={{ display: 'flex' }} className={'custom-table-form'} key={index} layout="inline">
          <div  style={{ width: '180px', lineHeight: '29px', textAlign: 'center', border: '1px solid #d9d9d9' }}>
            {item.name}
          </div>
          {this.renderColumn(item)}
        </Form>
      );
    });
    const that=this
    return (
      <div>
        <Form onSubmit={this.handleSubmit}>
          <FormItem
            style={{display:'inline-block',width:'33%'}}
            {...formItemLayoutWithLabel}
            label={(
              <span>
               送检单位
            </span>
            )}
          >
            {getFieldDecorator('inspection_unit', {
              initialValue: this.props.editRecord?this.props.editRecord.inspection_unit:"",
            })(
              <Input />
            )}
          </FormItem>
          <FormItem
            style={{display:'inline-block',width:'33%'}}
            {...formItemLayoutWithLabel}
            label={(
              <span>
               采样日期
            </span>
            )}
          >
            {getFieldDecorator('sampling_date', {
              initialValue: this.props.editRecord?moment(this.props.editRecord.sampling_date):moment(),
            })(
              <DatePicker allowClear={false} />
            )}
          </FormItem>

          <FormItem
            style={{display:'inline-block',width:'33%'}}
            {...formItemLayoutWithLabel}
            label={(
              <span>
               报告编号
            </span>
            )}
          >
            {getFieldDecorator('report_number', {
              initialValue: this.props.editRecord?this.props.editRecord.report_number:"",
            })(
              <Input />
            )}
          </FormItem>
        </Form>
        <div style={{ border: '1px solid #d9d9d9' }}>
          <div style={{
            display: 'flex',
            fontWeight: 'bold',
            lineHeight: '32px',
            height: '32px',
            background: 'rgb(249,249,249)',
          }}>
            <div style={{ width: '180px', paddingLeft: '10px', border: '1px solid #d9d9d9' }}></div>
            {
              this.state.address.map((item,index)=>{
                return   <div  key={item.key} style={{ flex: '1', border: '1px solid #d9d9d9' }}>
                <Input style={{ width: '100%', fontWeight: 'bold' }}
                disabled={Boolean(index===  that.state.address.length-1)}
                value={item.name}
                onChange={(e)=>{
                  e.persist()
                 // console.log(e)
                 that.state.address[index]={ name: e.target.value,key:item.key}
                 // console.log(that.state.address)
                 that.setState({
                   address:that.state.address
                 })
               }}
                />
              </div>
              })
            }
          </div>
          <div>
            {meterForms}
          </div>

        </div>
        <Form onSubmit={this.handleSubmit} style={{textAlign:'center',marginTop:'10px'}}>
          <FormItem
            style={{display:'inline-block',width:'33%'}}
            {...formItemLayoutWithLabel}
            label={(
              <span>
               填表
            </span>
            )}
          >
            {getFieldDecorator('author', {
              initialValue: this.props.editRecord?this.props.editRecord.author:"",
            })(
              <Input />
            )}
          </FormItem>
          <FormItem
            style={{display:'inline-block',width:'33%'}}
            {...formItemLayoutWithLabel}
            label={(
              <span>
               审核
            </span>
            )}
          >
            {getFieldDecorator('reviewer', {
              initialValue: this.props.editRecord?this.props.editRecord.reviewer:"",
            })(
              <Input />
            )}
          </FormItem>
          <FormItem
            style={{display:'inline-block',width:'33%'}}
            {...formItemLayoutWithLabel}
            label={''}
          >
            {getFieldDecorator('file', {
              rules: [{required: true, message:''}],
            })(
              <Upload {...props} style={{width:'100%'}}>
                <Button type={'primary'}>上传原文件</Button>
              </Upload>
            )}

          </FormItem>
        </Form>
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);
